<template>
  <div class="PageQuery">
    <div v-show="showFlag">
      <toptip ref="topTip">
        <div class="topMes">{{txt}}</div>
      </toptip>
      <div class="mes" style="margin-bottom: .3rem">
        <h3 class="title" style="margin-bottom: .3rem">用户须知</h3>
        <!--<p><span class="starspace">*</span>同意签约电子声明的用户,即可查询处罚信息</p>-->
        <!--<p><span class="starspace">*</span>同意签约电子声明者需在3个工作日后才生成处罚决定书</p>-->
        <p><span class="starspace">*</span>收到违法通知书3个工作日无法申请,且个人罚款5000元以上才有申请听证的权力</p>
        <p><span class="starspace">*</span>如有异议的用户请到窗口陈述,申辩，申请听证</p>
      </div>
      <div class="title">我的违法信息通知栏</div>
      <div class="content">
        <div class="space">
          <span>当事人:</span><span v-html="result.salutation"></span>
        </div>
        <div class="space">
          <span>案件编号:</span><span v-html="result.caseCode"></span>
        </div>
        <div class="space">
          <span>违法行为:</span><span v-html="result.illegality"></span>
        </div>
        <div class="space">
          <span>处罚金额:</span><span v-html="result.amerce"></span>元
        </div>
        <div class="space">
          <span>执法机构联系人:</span><span v-html="result.name"></span>
        </div>
        <div class="space">
          <span>执法机构联系电话:</span><span v-html="result.telephone"></span>
        </div>
        <div class="space">
          <span>执法机构联系地址:</span><span v-html="result.lawArganReating"></span>
        </div>
        <div class="btn-con">
          <button class="btn success" @click="ageree">同意</button>
          <button class="btn dangerous" @click="disagree">不同意</button>
        </div>
      </div>
    </div>
    <loading v-show="!showFlag"></loading>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import loading from './loading'
  import toptip from './top-tip/top-tip'
  import confirm from './confirm/confirm'
  import {baseurl} from '../base/config'
  import {mapMutations} from "vuex"

  export default {
    name: "Illegality",
    components: {
      loading,
      toptip,
      confirm
    },
    data() {
      return {
        id: this.$route.params.id,
        bookId: this.$route.params.bookId,
        status: {
          fail: 1,
          success: 0
        },
        result: {},
        txt: "",
        mes: "",
        showFlag: false,
      }
    },
    mounted() {
      this.fetchData();
    },
    watch: {
      result(newresult) {
        newresult ? this.showFlag = true : this.showFlag = false
      }
    },
    methods: {
      ...mapMutations({
        setuser: "SET_USER"
      }),

      //通知书无异议
      ageree() {
        //this.$refs.confirm.show();
        this.disagreeNotice(this.status.success);
        this.$router.push({
          name: "declaration",
          params: {
            id: this.bookId
          }
        })
      },
      //通知书有异议
      disagree() {
        this.disagreeNotice(this.status.fail);
        this.txt = "请到窗口办理咨询";
        this.$refs.topTip.show();
        setTimeout(() => {
          this.$router.push({
            path: '/',
          })
        }, 1000)
      },

      //判断通知书是否有异议
      disagreeNotice: async function (status) {
        const url = baseurl + "/agreement/notice/decideDissent.json";
        let params = {
          detailListId: this.bookId,
          status: status
        };
        const res = await http.post(url, params);
        // console.log(res.data);
        this.setuser(res.data.data);
        this.mes = res.data.msg

      },
      //获取通知书
      fetchData: async function () {
        // if(!this.id){
        //   this.$router.push({
        //     name:"confirm"
        //   })
        // }
        const url = baseurl + "/caseQuery/getIllegalNotices";
        let params = {
          code: this.id
        };
        const res = await http.get(url, params);
        this.result = res.data.data;
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  .PageQuery {
    .starspace {
      margin-left: -.3rem;
      margin-right: .2rem;
    }
    .topMes {
      font-size: .3rem;
      height: .8rem;
      line-height: .8rem;
      background: #449d44;
      color: #fff;
      text-align: center;
    }
    .title {
      text-align: center;
      font-size: .35rem;
      margin-top: 1rem;
      color: #449d44;
    }
    .content {
      margin-top: .5rem;
      font-size: .25rem;
      padding: 0 .5rem;
      line-height: .58rem;
      margin-bottom: 4rem;

      .space {
        margin-bottom: .1rem;
      }
    }
    .mes {
      font-size: .25rem;
      color: red;
      /*padding: 0 .5rem;*/
      line-height: .55rem;
      padding: 0 .5rem;
      p {
        padding-left: .2rem;
      }
    }
    .btn-con {
      text-align: center;
      margin: .8rem 0;
      .btn {
        width: 1.5rem;
        height: .7rem;
        border-radius: .3rem;
        outline: none;
        border: none;
        margin-right: .6rem;
        color: #fff;
        font-size: .26rem;
        line-height: .7rem;
      }
      .success {
        background: #449d44;
      }
      .dangerous {
        background: #c9302c;
      }
    }
  }

</style>
